<template>
    <div class="goods">
        <div class="wrap">
            <Crumb></Crumb>
            <img src="../assets/img/banner.4c6b6225.png" width="100%" alt />
            <ul class="options">
                <li>
                    <strong>排序:</strong>
                    <span
                        :class="{active:index==num1}"
                        v-for="item,index in options1"
                        :key="index"
                        @click="options1Fn(index,item.min,item.max)"
                    >{{item.txt}}</span>
                </li>
                <li>
                    <strong>分类:</strong>
                    <span
                        :class="{active:num2==index}"
                        v-for="item,index in options2"
                        :key="index"
                        @click="options2Fn(index,item.type)"
                    >{{item.txt}}</span>
                </li>
            </ul>
            <List :arr="showMoreProducts" />
            <div style="text-align:center">{{!isReachButtom?'正在加载...':'到底了!!!'}}</div>
        </div>
    </div>
</template>                            
<script>
import Crumb from "../components/Crumb.vue";
import List from "../components/home/List.vue";
import { moreProductsApi } from "@/request/api";
import { getScrollTop, getClientHeight, getScrollHeight } from "@/utils/index";
export default {
    data() {
        return {
            // 排序的数组项
            options1: [
                { min: 0, max: 30000, txt: "全部" },
                // "我还可以兑换"的max值是Header组件的coin值
                { min: 0, max: 0, txt: "我还可以兑换" },
                { min: 0, max: 500, txt: "0-500分" },
                { min: 500, max: 1000, txt: "500-1000分" },
                { min: 1000, max: 1500, txt: "1000-1500分" },
                { min: 1500, max: 2500, txt: "1500-2500分" },
                { min: 2500, max: 6500, txt: "2500-6500分" },
                { min: 6500, max: 10000, txt: "6500-10000分" },
                { min: 10000, max: 30000, txt: "10000-30000分" },
            ],
            // 分类数组项
            options2: [
                { type: 0, txt: "全部" },
                { type: 1, txt: "实体商品" },
                { type: 2, txt: "虚拟商品" },
            ],
            // 排序当前项
            num1: 0,
            // 分类当前项
            num2: 0,
            // 请求参数
            did: 0,
            max: 0,
            type: 0,
            min: 0,
            keyword: "",
            // 全部数据
            moreProducts: [],
            // 显示的数据
            showMoreProducts: [],
            // 页数
            page: 1,
            // 条目数
            size: 8,
            //是否加载
            isLoding: false,
            // 是否到达底部
            isReachButtom: false,
        };
    },
    components: {
        Crumb,
        List,
    },
    created() {
        this.getMoreProducts();
    },
    methods: {
        async getMoreProducts() {
            let res = await moreProductsApi({
                did: this.did,
                type: this.type,
                max: this.max,
                min: this.min,
                keyword: this.keyword,
            });
            if (!res) return;
            if (res.code == 0) {
                console.log(res);
                this.moreProducts = res.data;
                this.showMoreProducts = this.moreProducts.filter(
                    (item, index) => index < 8
                );
                this.page = 1;
                this.isReachButtom = false;
                if (this.showMoreProducts.length == this.moreProducts.length) {
                    this.isReachButtom = true;
                    return;
                }
            }
        },
        options1Fn(index, min, max) {
            this.num1 = index;
            this.min = min;
            this.max = max;
            this.getMoreProducts();
        },
        options2Fn(index, type) {
            this.num2 = index;
            this.type = type;
            this.getMoreProducts();
        },
        scrollFn() {
            // console.log(getScrollTop(), getClientHeight(), getScrollHeight());
            if (getScrollTop() + getClientHeight() >= getScrollHeight() - 200) {
                // 数组长度相等  到达底部
                if (this.moreProducts.length == this.showMoreProducts.length) {
                    this.isReachButtom = true;
                    return;
                }
                if (this.isLoding == false) {
                    this.isLoding = true;
                    this.page++;
                    setTimeout(() => {
                        for (
                            let i = this.size * (this.page - 1);
                            i < this.page * this.size;
                            i++
                        ) {
                            this.moreProducts[i] &&
                                this.showMoreProducts.push(
                                    this.moreProducts[i]
                                );
                        }
                        this.isLoding = false;
                    }, 1500);
                }
            }
        },
    },
    mounted() {
        window.addEventListener("scroll", this.scrollFn);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.scrollFn);
    },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/css/public.less";

.goods {
    padding-bottom: 50px;
    background: #efefef;
    padding-top: 20px;

    .options {
        padding-top: 20px;
        padding-bottom: 40px;
        li {
            margin-top: 20px;
            strong {
                color: #000;
                font-weight: bold;
            }
            span {
                margin-right: 20px;
                margin-left: 10px;
                cursor: pointer;
                color: #999;
                &.active {
                    color: @base-color;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>